<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" href="../../css/animate.css">
		<link rel="stylesheet" href="../../iconfont/iconfont.css">
		<link rel="stylesheet" href="../../css/mescroll.css">
		<link rel="stylesheet" href="../../css/gloab.css">
		<title>红包大厅</title>
		<style>
			.none-order {
				text-align: center;
				color: #727272;
				line-height: 200%;
				margin-top: 1rem;
			}

			.mescroll {
				position: fixed;
				top: 0;
				bottom: 0;
				height: auto;
				/*如设置bottom:50px,则需height:auto才能生效*/
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="public-header">
				<div id="statusbar"></div>
				<header class="public-header">
					<div class="public-header-lf iconfont icon-fanhui" @click="javascript:api.closeWin();"></div>
					<div class="public-header-title">红包大厅</div>
					<div class="public-header-text" @click="fahb">
						我要发红包</div>
				</header>
			</div>
			<div class="dating-body auto" style="padding-bottom:0.5rem;">
				<div class="dating-body-bar flex" id="nav">
					<div class="dating-body-bar-son F1" v-for="(item,index) in res" :style="indexs==index?'':'background-color:#eaeff4;color:#64aafc;'"
					 @click="getList(index)">{{item}}</div>
				</div>
				<div id="mescroll" class="mescroll">
					<div>
						<div class="product-category-list" v-if="list&&list.length>0">
							<div class="product-category-list-son" style="width:94%;" v-for="(item,index) in list">
								<div class="product-category-list-header flex wrap">
									<div class="product-category-list-header-lf" style="height:1.1rem;">
										<img :src="apiUrl1+item.user.avatar" alt="" v-if="item.user.avatar">
										<img src="../../image/public/touxiang.png" alt="" v-else>
										<label class="product-category-list-header-label" v-if="item.Identity==2">站长</label>
										<label class="product-category-list-header-label" v-if="item.Identity==3">合伙人</label>
										<label class="product-category-list-header-label zzlabel" v-if="item.Identity==1">{{item.ranks}}</label>
									</div>
									<div class="product-category-list-header-rt">
										<div class="product-category-list-header-name flex">
											<div class="product-category-list-header-name-lf F5" style="margin-top:0.16rem;">{{item.user.nickname}}
												<font class="zd-label" v-if="item.zhiding">置顶</font>
												<font class="zdsx-label" v-if="item.shuaxing">自动刷新</font>
											</div>
											<div class="product-category-list-header-name-rt F2" style="margin-top:0;">
												<span style="border:none;" @click="kongjian(item.id)">空间&nbsp;></span><br>
												<span style="border:none;color:#ff3333;" @click="javascript:api.openWin({name: 'dating_details',reload:true,url:'./dating_details.html',pageParam: {id:item.id}});">抢红包&nbsp;></span>
											</div>
										</div>
									</div>
								</div>
								<div class="product-category-list-text" style="height:1rem;overflow:hidden;" v-if="item.content" v-html="item.content"></div>
								<div v-if="item.imgs&&item.imgs.length>0">
									<div class="product-category-list-imgs flex wrap">
										<div class="product-category-list-img" v-if="index<3" :style="index==0?'margin-left:0;':''" v-for="(datas,index) in item.imgs">
											<img @click="seeImg(item,index)" :src="apiUrl1+datas" alt="">
										</div>
										<div class="product-category-list-img" v-if="item.imgs.length>3" @click="seeImg(item,3)">
											<img :src="apiUrl1+item.imgs[3]" alt="">
											<div class="product-category-list-modify">更多图片</div>
										</div>
									</div>
								</div>
								<div class="product-category-list-footer clearfix">
									<!-- <span class="wshy" style="color:#f00;border: 1px solid #f00;">排名:{{item.ranking}}</span> -->
									<span class="wshy">{{item.block}}</span>
									<span>曝光次数：{{item.view_count}}&nbsp;&nbsp;刷新：{{item.update_time_str}}</span>
									<div class="product-category-list-share fr" @click="share(item.id)">
										<img src="../../image/public/home9.png" alt="">
									</div>
								</div>
								<div class="product-category-list-hongbao flex" @click="javascript:api.openWin({name: 'dating_details',reload:true,url:'./dating_details.html',pageParam: {id:item.id}});">
									<div class="product-category-list-hongbao-lf F5">
										<img src="../../image/personal/icon3.png" alt="">
										<span>￥{{item.money}}.00</span>
									</div>
									<div class="product-category-list-hongbao-rt F5" style="text-align:right;" v-if="item.is_null ==1">红包已派完！</div>
									<div class="product-category-list-hongbao-rt F5" style="text-align:right;" v-else>疯抢中...</div>
								</div>
							</div>
						</div>
						<!-- <div v-if="list&&list.length<=0" class="none-order">
        <span>暂无数据</span>
      </div> -->
					</div>
				</div>
			</div>
		</div>
		<div class="public-progress" style="z-index:9;">
			<img src="../../icon/icon150x150.png" alt="" class="animated infinite flash" style="width:200px;height:200px;display:block;margin:200px auto;">
		</div>
	</body>
	<script src="../../script/api.js"></script>
	<script src="../../script/jquery.js"></script>
	<script src="../../script/mescroll.js"></script>
	<script src="../../script/vue.js"></script>
	<script src="../../script/app.js"></script>
	<script src="../../script/jsencrypt.js"></script>
	<script src="../../script/fastclick.js"></script>

	<script>
		var vm;
		var mescroll;
		var mySwiper;
		apiready = function() {
			api.removeLaunchView();
			setBar("statusbar");
			setFont(750);
			startVue();
			NewMescroll();
			var top = $("#public-header").outerHeight(true) + $("#nav").outerHeight(true);
			$("#mescroll").css({
				"top": top + "px"
			});
			$(".public-progress").fadeOut(1000);
			setTimeout(function() {
				$(".public-progress").css({
					"display": "none"
				});
			}, 1000);
		}

		function startVue() {
			vm = new Vue({
				el: "#app",
				data: {
					gdtt: ['50', '100', '200', '300', '500', '1000'],
					num: 0,
					banner: ["../../image/tg/tg1.jpg", "../../image/tg/tg2.jpg", "../../image/tg/tg3.jpg"],
					list: [],
					res: ['全部', '未领取'],
					indexs: '0',
					page: 1,
					showpage: 8,
				},
				created: function() {
					// this.getList();
				},
				mounted: function() {},
				methods: {
					//获取分享赠送积分
					getIntegral: function() {
						api.ajax({
							url: apiUrl + 'api/home/getIntegral',
							method: 'post',
							data: {
								values: {
									uid: post_en($api.getStorage('uid')),
								},
							}
						}, function(ret, err) {
							if (ret.status) {
								alert(ret.msg);
							} else {
								alert(ret.msg);
							}
						});
					},
					//分享朋友圈
					share: function(index) {
						// alert('开发中......');return;
						var wxPlus = api.require('wxPlus');
						wxPlus.isInstalled(function(ret, err) {
							if (ret.installed) {
								var wxPlus = api.require('wxPlus');
								wxPlus.shareWebpage({
									apiKey: '',
									scene: 'timeline',
									title: '最新项目',
									description: '本条信息由趣引流平台推送，您也想自动引流，自动推广就下载吧。',
									thumb: 'widget://icon/logo.jpg',
									contentUrl: apiUrl + "/index.php/index/index/user?ids=" + index,
								}, function(ret, err) {
									if (ret.status) {
										vm.getIntegral();
									} else {
										// alert(err.code);
									}
								});
							} else {
								alert('当前设备未安装微信客户端');
							}
						});
					},
					fahb: function() {
						api.openWin({
							name: 'fabu',
							url: '../home/fahongbao.html',
							reload:true
						});
					},
					seeImg: function(item, index) {
						var array = [];
						for (var i = 0; i < item.imgs.length; i++) {
							array.push(apiUrl1 + item.imgs[i]);
						}
						var photoBrowser = api.require('photoBrowser');
						photoBrowser.open({
							images: array,
							placeholderImg: 'widget://res/img/apicloud.png',
							bgColor: '#000'
						}, function(ret, err) {
							if(ret.eventType == 'longPress'){ save_img(array); }
							if (ret.eventType == 'click') {
								var photoBrowser = api.require('photoBrowser');
								photoBrowser.close();
							}
						});
						photoBrowser.setIndex({
							index: index
						});
					},
					//个人空间
					kongjian(id) {
						api.openWin({
							name: 'kongjian',
							url: '../personal/kongjian.html',
							reload: true,
							pageParam: {
								id: id
							}
						});
					},
					more: function(obj) {
						if (obj.num) {
							vm.page++;
						} else {
							vm.page = 1;
							mescroll.lockUpScroll(false);
						}
						vm.getList(vm.indexs);
					},
					//红包广告展示
					getList: function(index) {
						api.showProgress({
							title: '努力加载中...',
							text: '先喝杯茶...',
							modal: false
						});
						if (index == "undefined") {
							this.indexs = 0;
						} else if (index == 1) {
							this.indexs = 1;
						} else if (index == 0) {
							this.indexs = 0;
						}
						api.ajax({
							url: apiUrl + '/api/index/task',
							method: 'post',
							data: {
								values: {
									is_null:this.indexs,
									type: 12,
									page: vm.page
								},
							}
						}, function(ret, err) {
							console.log(JSON.stringify(ret))
							if (vm.page == 1) {
								vm.list = [];
							}
						if (ret.code == 1) {
							console.log(vm.list.length)
							if (vm.list.length >= ret.data.total&&vm.list.length!=0) {
								api.hideProgress();
								msg("我也是有底线的！");
									mescroll.lockUpScroll(true); 
							} else {
								api.hideProgress();
								for (var i = 0; i < ret.data.list.length; i++) {
									vm.list.push(ret.data.list[i]);
								}
							}
						}
					
						mescroll.endUpScroll(false);
						mescroll.endSuccess();
						});
					},
				}
			})
		}

		function NewMescroll() {
			mescroll = new MeScroll("mescroll", {
				down: {
					use: true,
					auto: true,
					// autoShowLoading:true,
					callback: vm.more, //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
				},
				up: {
					use: true,
					auto: false,
					lazyLoad: {
						use: true, // 是否开启懒加载,默认false
						attr: 'imgurl', // 网络地址的属性名 (图片加载成功会移除该属性): <img imgurl='网络图  src='占位图''/>
						showClass: 'mescroll-lazy-in', // 图片加载成功的显示动画: 渐变显示,参见mescroll.css
						delay: 500, // 列表滚动的过程中每500ms检查一次图片是否在可视区域,如果在可视区域则加载图片
						offset: 200 // 超出可视区域200px的图片仍可触发懒加载,目的是提前加载部分图片
					},
					callback: vm.more, //上拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
				}
			})
		}
	</script>
</html>
